<template>
  <div style="padding: 15px;">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item :label="form.code.indexOf('CK') === -1 ? '拣货单号' : '出库单号' ">
              <el-input v-model="form.code" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="波次单号">
              <el-input v-model="form.wavePickingCode" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="仓库" label-width="100px">
              <el-input v-model="form.warehouseName" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="入驻商" label-width="100px">
              <el-input v-model="form.shipmentName" style="width:74%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="承运商">
              <el-input v-model="form.carrierName" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="订单数量" label-width="100px">
              <el-input v-model="orderNum" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="商品种类">
              <el-input v-model="form.goodsSortQuantity" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row> -->
    </el-form>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="商品详情" name="goodList">
        <goodList :goodListData="form.outboundItemWithRegisterVOList" operation="detail" />
      </el-tab-pane>
      <el-tab-pane label="订单详情" name="orderList">
        <orderList operation="detail" @setOrderNum="setOrderNum" />
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmitCheck" plain>返 回</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
VXETable.use(VXETablePluginElement)

import { outboundDetail } from '@/api/outStorage'
import goodList from './goodList.vue'
import orderList from './orderList.vue'

export default {
  name: 'waveNumberCheck',
  components: {
    goodList,
    orderList,
  },
  data() {
    return {
      activeName: 'goodList',
      allAlign:'center',
      warehouseData:[],
      units:[],
      modelEditFlag: false,
      isShow0:false,
      isShow1:false,
      isDisable:false,                                                                          //确定键显示按钮
      orderNum:'', // 订单数量
      form: {
        code: '',                                                                      //收货单号 ,
        customerCode: '',                                                                      //客户 ,
        carrierName: '',  //承运商
        gmtPlanArrival: '',                                                                      //计划到货日期 ,
        groupCode: '',                                                                      //所属机构Code ,
        putawayQuantity: '',                                                                      //上架数量 ,
        receivedQuantity: '',                                                                      //收货数量 ,
        remarks: '',                                                                      //备注 ,
        shipmentCode: '',                                                                      //入驻商 ,
        shipmentName:'',
        deliveryCode: '',                                                                      //来源单号 ,
        status: '',                                                                      //状态；0:新增；1：作废；2：待收货；3：部分收货；4：收货完成； ,
        supplierCode: '',                                                                      //供应商 ,
        totalQuantity: '',                                                                      //总数量 ,
        typeText: '',                                                                      //单据类型；0：收货单；1：退货单； ,
        warehouseCode: '',                                                                      //仓库
        pickingItemWithRegisterVOList: []
      },
      goodListData: [],
      loading: false,
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 父组件传递过来的值
    setOrderNum(num){
      this.orderNum = num
    },
    // 获取页面信息
    getInfo() {
      this.loading = true
      let code = this.$route.query.code ? this.$route.query.code : ""
      outboundDetail(code).then(response => {
        this.form = response.data
        // this.goodListData = this.form.pickingItemWithRegisterVOList
        // 获取合并表格数组
        // this.getSpanArr(this.tableData)
        this.loading = false
      })
    },
    // 返回
    funcSubmitCheck() {
      this.$eventBus.$emit('refreshList')
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({
        path: "/wms/outbound"
      });
    },
    // 获取合并单元格的范围
    getSpanArr(data) {
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].pickingItemCode === data[i - 1].pickingItemCode) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },

    footerMethod ({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 1) {
            return '合计'
          }
          if (['distributionQuantity'].includes(column.property)) {
            return this.form.planQuantity
          }
          if (['pickingQuantity'].includes(column.property)) {
              return XEUtils.sum(data, column.property).toFixed(3)
          }
          if (['stockoutQuantity'].includes(column.property)) {
            return parseInt(XEUtils.sum(this.distinctTableData, column.property))
          }
          return '-'
        })
      ]
    },
    // 表格合并行
    objectSpanMethod({ row, rowIndex,column,  columnIndex }) {
      if (this.mergeColumnIndex.includes(columnIndex)) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 已拣货的拣货数量禁止编辑
    editActiveEvent ({ rowIndex, row }) {
      this.pickingQuantityEditActive = row.status != '0'
    },
  }
}
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 150px auto;
    width: 90px;
    // float: right;
  }
  </style>

<style>
.vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
 padding: 6px 0;
}
.vxe-toolbar{padding:0 0 10px 0}
</style>
